
<template>
    <div class="common_page">
        <div class="main_content" ref="mainContent">
            <el-card class="main-card" shadow="never">
                <el-form :model="searchData" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom: -20px">
                    <el-form-item label="物料编号" prop="number">
                        <el-input placeholder="请输入内容" v-model="searchData.number"></el-input>
                    </el-form-item>
                    <el-form-item label="物料名称" prop="name">
                        <el-input placeholder="请输入内容" v-model="searchData.name"></el-input>
                    </el-form-item>
                    <el-form-item label="负责人" prop="person">
                        <el-input placeholder="请输入内容" v-model="searchData.person"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="telephone">
                        <el-input placeholder="请输入内容" v-model="searchData.telephone"></el-input>
                    </el-form-item>
                    <el-form-item label="入库时间" prop="date">
                        <el-date-picker v-model="searchData.date" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
                    </el-form-item>
                </el-form>
                <div class="card-toolbar mb8 flex-between" style="margin-top: 20px; width: 100%">
                    <div>
                        <el-button v-hasPermi="['productManage:materialManage:query']" type="primary" style="margin-right: 20px" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
                        <el-button v-hasPermi="['productManage:materialManage:add']" type="primary" icon="el-icon-plus" size="mini" @click="addNewData">新增</el-button>
                    </div>

                    <div>
                        <el-tooltip class="item" effect="dark" content="重置" placement="top">
                            <el-button size="mini" circle icon="el-icon-refresh" v-hasPermi="['productManage:materialManage:query']" @click="resetFields" />
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="导出" placement="top">
                            <el-button size="mini" circle icon="el-icon-download" v-hasPermi="['productManage:materialManage:export']" @click="handleExport" />
                        </el-tooltip>
                    </div>
                </div>

                <div class="page_content" style="width: 100%">
                    <div class="page_content_bottom">
                        <sysTable
                            :data="setTableData"
                            :columns="setTableColumns"
                            :curr-page="searchData.currPage"
                            :total-page="pageTotal"
                            :page-size="searchData.pageSize"
                            @sizeChange="sizeChange"
                            @currentChange="currentChange"
                        >
                            <template #brand="scope">
                                <div>{{ scope.scope.row.brand }} {{ scope.scope.row.specification }}</div>
                            </template>
                            <template #operation="scope">
                                <el-button v-hasPermi="['productManage:materialManage:in']" size="small" type="primary" plain style="padding: 5px" icon="el-icon-download" @click="showwarehousing(scope.scope.row)">
                                    入库
                                </el-button>
                                <el-button v-hasPermi="['productManage:materialManage:out']" size="small" type="primary" plain style="padding: 5px" icon="el-icon-upload2" @click="showOutLibrary(scope.scope.row)">
                                    出库
                                </el-button>
                                <br />
                                <el-button v-hasPermi="['productManage:materialManage:edit']" size="small" type="primary" plain style="padding: 5px; margin-left: 0" icon="el-icon-edit" @click="editData(scope.scope.row)">
                                    编辑
                                </el-button>
                                <el-button v-hasPermi="['productManage:materialManage:detail']" size="small" type="primary" plain style="padding: 5px" icon="el-icon-view" @click="todetail(scope.scope.row)">
                                    详情
                                </el-button>
                            </template>
                        </sysTable>
                    </div>
                </div>
                <el-dialog :title="addOrEditTitle" :visible.sync="addOrEditDialog" width="748px" append-to-body>
                    <el-form ref="form" :model="formData" label-width="80px">
                        <!-- <div style="opacity: 0;">1</div> -->

                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="物料编号" prop="number">
                                    <el-input v-model="formData.number" placeholder="请输入物料编号" style="width: 265px" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="物料名称" prop="name">
                                    <el-input v-model="formData.name" placeholder="请输入物料名称" style="width: 265px" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="物料分类" prop="classifyNumber">
                                    <el-select v-model="formData.classifyNumber" :disabled="addOrEditTitle == '详情'" clearable style="width: 265px" placeholder="请选择">
                                        <el-option v-for="item in materialClassificationList" :key="item.id" :label="item.number" :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="规格型号" prop="brand">
                                    <el-input v-model="formData.brand" placeholder="请输入规格型号" style="width: 265px" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <!-- <el-col :span="12">
                  <el-form-item label="工艺" prop="craftNumber">
                    <el-select v-model="formData.craftNumber" :disabled="addOrEditTitle=='详情'" size="small" style="width:265px;" placeholder="请选择">
                      <el-option
                        v-for="item in technologyList"
                        :key="item.id"
                        :label="item.number"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col> -->
                            <el-col :span="12">
                                <el-form-item label="库存下限" prop="lowerQuantity">
                                    <el-input v-model="formData.lowerQuantity" placeholder="请输入库存下限" style="width: 265px" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="负责人" prop="principal">
                                    <el-input v-model="formData.principal" placeholder="请输入负责人" style="width: 265px" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="联系方式" prop="telephone">
                                    <el-input v-model="formData.telephone" placeholder="请输入联系方式" style="width: 265px" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="库存" prop="quantity">
                                    <el-input v-model="formData.quantity" placeholder="请输入库存" style="width: 265px" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="单位" prop="unit">
                                    <el-input v-model="formData.unit" placeholder="请输入单位" style="width: 265px" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="备注" prop="remarks">
                                    <el-input v-model="formData.remarks" type="textarea" rows="2" placeholder="请输入备注" style="width: 265px" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>

                    <div slot="footer" class="dialog-footer">
                        <el-button @click="addCancel">取 消</el-button>
                        <el-button type="primary" @click="addSubmitForm">提 交</el-button>
                    </div>
                </el-dialog>
                <el-dialog title="入库" class="warehousing_dialog" :visible.sync="warehousingDialog" width="388px" append-to-body>
                    <el-form ref="form" :model="warehousingData" label-width="80px">
                        <div class="dialog_content">
                            <div class="dialog_content_title">{{ warehousingData.name || '-' }}</div>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="负责人:">
                                        <div>{{ warehousingData.principal || '-' }}</div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="物料数量:">
                                        <div>{{ warehousingData.quantity || '-' }}</div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="物料编号:">
                                        <div>{{ warehousingData.number || '-' }}</div>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="入库数量" prop="afterQuantity">
                                    <el-input v-model="warehousingData.afterQuantity" type="number" placeholder="请输入采购数量" style="width: 265px" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>

                    <div slot="footer" class="dialog-footer">
                        <el-button @click="intoCancel">取 消</el-button>
                        <el-button type="primary" @click="intoSubmitForm">提 交</el-button>
                    </div>
                </el-dialog>
                <el-dialog title="出库" class="outLibrary_dialog" :visible.sync="outLibraryDialog" width="388px" append-to-body>
                    <el-form ref="form" :model="outLibraryData" label-width="80px">
                        <div class="dialog_content">
                            <div class="dialog_content_title">{{ outLibraryData.name || '-' }}</div>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="负责人:">
                                        <div>{{ outLibraryData.principal || '-' }}</div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="物料数量:">
                                        <div>{{ outLibraryData.quantity || '-' }}</div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="物料编号:">
                                        <div>{{ outLibraryData.number || '-' }}</div>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <el-row>
                            <el-col :span="24" style="margin-bottom: 10px">
                                <el-form-item label="关联订单" prop="orderId">
                                    <!-- <el-input v-model="outLibraryData.orderId" type="number" placeholder="请输入采购数量" style="width:265px;" /> -->
                                    <el-select v-model="outLibraryData.orderId" clearable style="width: 265px" placeholder="请选择">
                                        <el-option v-for="item in allOrderList" :key="item.id" :label="item.number" :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="出库数量" prop="afterQuantity">
                                    <el-input v-model="outLibraryData.afterQuantity" type="number" placeholder="请输入采购数量" style="width: 265px" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>

                    <div slot="footer" class="dialog-footer">
                        <el-button @click="outCancel">取 消</el-button>
                        <el-button type="primary" @click="outSubmitForm">提 交</el-button>
                    </div>
                </el-dialog>
            </el-card>
        </div>
    </div>
</template>

<script>
import { getMaterialManageList, addMaterialManage, updateMaterialManage, updateMaterialManageOutOrIn, getMaterialClassifica, getAllOrder } from '../api/product/index';
import sysTable from '../components/SysTable';
export default {
    name: 'equipmentEnergy',
    components: {
        sysTable,
    },
    data() {
        return {
            searchData: {
                number: '',
                name: '',
                person: '',
                telephone: '',
                date: '',
                pageSize: 10,
                currPage: 1,
            },
            setTableData: [],
            pageTotal: 0,
            setTableColumns: [
                {
                    label: '物料名称',
                    prop: 'name',
                    minWidth: '180',
                    align: 'center',
                    fixed: 'left',
                    showOverflowTooltip: true,
                },
                {
                    label: '物料编号',
                    prop: 'number',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '物料分类',
                    prop: 'classifyName',
                    width: '220',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '(品牌)型号及规格',
                    prop: 'brand',
                    width: '220',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                // {
                //   label: '工艺',
                //   prop: 'craftName',
                //   width: '180',
                //   align: 'center',
                //   showOverflowTooltip: true
                // },
                {
                    label: '物料数量',
                    prop: 'quantity',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '单位',
                    prop: 'unit',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '库存下限',
                    prop: 'lowerQuantity',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '备注',
                    prop: 'remarks',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '入库时间',
                    prop: 'storageDate',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '负责人',
                    prop: 'principal',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },

                {
                    label: '联系方式',
                    prop: 'telephone',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '操作',
                    prop: 'operation',
                    width: '160',
                    fixed: 'right',
                    align: 'center',
                },
            ],
            buttonLoading: false,
            formData: {
                number: '',
                name: '',
                classifyNumber: '',
                brand: '',
                // craftNumber: '',
                lowerQuantity: '',
                principal: '',
                telephone: '',
                quantity: '',
                remarks: '',
                unit: '',
            },
            technologyList: [],
            materialClassificationList: [],
            allOrderList: [],
            addOrEditTitle: '新增',
            addOrEditDialog: false,
            warehousingDialog: false,
            warehousingData: {
                afterQuantity: '',
            },
            outLibraryDialog: false,
            outLibraryData: {
                afterQuantity: '',
                orderId: '',
            },
        };
    },
    mounted() {
        this.getPageList();
        this.getMaterialClassifica();
        // this.getTechnology()
    },
    methods: {
        search() {
            this.buttonLoading = true;
            this.searchData.currPage = 1;
            this.getPageList();
        },
        resetFields() {
            this.searchData = {
                number: '',
                name: '',
                person: '',
                telephone: '',
                date: '',
                pageSize: 10,
                currPage: 1,
            };
            this.search();
        },
        sizeChange(val) {
            this.searchData.pageSize = val;
            this.getPageList();
        },
        currentChange(val) {
            this.searchData.currPage = val;
            this.getPageList();
        },
        getPageList() {
            getMaterialManageList(this.searchData)
                .then((res) => {
                    this.setTableData = res.data.list;
                    this.pageTotal = res.data.total || 0;
                })
                .finally(() => {
                    this.buttonLoading = false;
                });
        },
        getMaterialClassifica() {
            getMaterialClassifica().then((res) => {
                this.materialClassificationList = res.data.list || [];
            });
        },
        getAllOrder() {
            getAllOrder().then((res) => {
                if (res.code == 200) {
                    this.allOrderList = res.data.list || [];
                } else {
                    this.$message.error('订单列表请求失败，请联系管理员');
                }
            });
        },
        // getTechnology() {
        //   getTechnology().then(res=> {
        //     this.technologyList = res.data.list || []
        //   })
        // },
        handleExport() {
            this.buttonLoading = true;
            var datas = {
                buildingId: this.searchData.buildingId,
                workshopId: this.searchData.workshopId,
                deviceId: this.searchData.deviceId,
                classifyNumber: this.searchData.classifyNumber,
                deviceName: this.searchData.deviceName,
                begin: this.searchData.date ? this.searchData.date[0] : '',
                end: this.searchData.date ? this.searchData.date[1] : '',
                timeType: this.searchData.type,
                pageSize: '',
                currPage: '',
            };
            const obj = JSON.parse(JSON.stringify(datas));
            this.download(
                'production/materialsInformationByReport',
                {
                    ...obj,
                },
                '物料管理记录.xlsx'
            );
            this.buttonLoading = false;
            // exportBuild(obj).then(res=> {
            //   const fileName = '设备能源监控记录.xlsx'
            //   saveExcel(res.data, fileName)
            // })
        },
        addNewData() {
            this.addOrEditTitle = '新增';
            this.addOrEditDialog = true;
        },
        editData(val) {
            this.addOrEditTitle = '编辑';
            this.addOrEditDialog = true;
            this.formData = JSON.parse(JSON.stringify(val));
            this.formData.classifyNumber = this.formData.classifyNumber - 0;
        },
        todetail(val) {
            console.log(val, '333');
            this.$router.push(`/shengchan/materialManage/detail?number=${val.number}`);
        },
        showwarehousing(val) {
            this.warehousingData.id = val.id;
            this.warehousingData.name = val.name;
            this.warehousingData.principal = val.principal;
            this.warehousingData.quantity = val.quantity;
            this.warehousingData.number = val.number;
            this.warehousingDialog = true;
        },
        showOutLibrary(val) {
            this.outLibraryData.id = val.id;
            this.outLibraryData.name = val.name;
            this.outLibraryData.principal = val.principal;
            this.outLibraryData.quantity = val.quantity;
            this.outLibraryData.number = val.number;
            this.outLibraryDialog = true;
            this.getAllOrder();
        },
        addSubmitForm() {
            if (this.addOrEditTitle == '新增') {
                addMaterialManage(this.formData).then((res) => {
                    if (res.code == 200) {
                        this.addOrEditDialog = false;
                        this.searchData.currPage = 1;
                        this.getPageList();
                    } else {
                        this.$message.error('新增失败，请联系管理员');
                    }
                });
            } else {
                updateMaterialManage(this.formData).then((res) => {
                    if (res.code == 200) {
                        this.addOrEditDialog = false;
                        this.searchData.currPage = 1;
                        this.getPageList();
                    } else {
                        this.$message.error('编辑失败，请联系管理员');
                    }
                });
            }
        },
        addCancel() {
            this.addOrEditDialog = false;
            this.formData = {
                number: '',
                name: '',
                classifyNumber: '',
                brand: '',
                unit: '',
                // craftNumber: '',
                lowerQuantity: '',
                principal: '',
                telephone: '',
                quantity: '',
                remarks: '',
            };
        },
        intoCancel() {
            this.warehousingDialog = false;
            this.warehousingData = {
                afterQuantity: '',
            };
        },
        intoSubmitForm() {
            const obj = {
                id: this.warehousingData.id,
                type: 1,
                quantity: this.warehousingData.quantity,
                afterQuantity: this.warehousingData.afterQuantity,
            };
            updateMaterialManageOutOrIn(obj).then((res) => {
                if (res.code == 200) {
                    this.$message.success('入库成功');
                    this.intoCancel();
                    this.searchData.currPage = 1;
                    this.getPageList();
                } else {
                    this.$message.error('入库失败，请联系管理员');
                }
            });
        },
        outSubmitForm() {
            const obj = {
                id: this.outLibraryData.id,
                type: 2,
                quantity: this.outLibraryData.quantity,
                afterQuantity: this.outLibraryData.afterQuantity,
                orderId: this.outLibraryData.orderId,
            };
            updateMaterialManageOutOrIn(obj).then((res) => {
                if (res.code == 200) {
                    this.$message.success('出库成功');
                    this.outCancel();
                    this.searchData.currPage = 1;
                    this.getPageList();
                } else {
                    this.$message.error('出库失败，请联系管理员');
                }
            });
        },
        outCancel() {
            this.outLibraryDialog = false;
            this.outLibraryData = {
                afterQuantity: '',
                orderId: '',
            };
        },
    },
};
</script>

<style lang="scss" scoped>
.common_page {
    height: 100%;
    width: 100%;
    background: #f3f4f5;
    overflow: auto;
}
.main_content {
    padding: 16px 20px;
}
::v-deep.el-card {
    border-radius: 8px;
}
.page_content {
    background: #fff;
    padding-bottom: 30px;
    box-sizing: border-box;
    padding: 20px 20px 30px 20px;
    border-radius: 8px;
    .page_content_head {
        display: flex;
    }
}
::v-deep.sys_table {
    .tableHeaderRow {
        cursor: pointer;
        .tableHeaderCell:active {
            opacity: 0.6;
        }
        .tableHeaderCell:last-of-type:active {
            opacity: 1;
        }
        .tableHeaderCell:first-of-type:active {
            opacity: 1;
        }
        .tableHeaderCell:last-of-type {
            cursor: default;
        }
        .tableHeaderCell:first-of-type {
            cursor: default;
        }
    }
}
.ope_btn {
    width: 44px;
    height: 28px;
    line-height: 28px;
    color: #3399ff;
    font-size: 14px;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid rgba(0, 85, 255, 0.5);
    padding: 0px;
}
.del_btn {
    width: 44px;
    height: 28px;
    background: #ffffff;
    line-height: 28px;
    color: #ff4c4d;
    font-size: 14px;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid rgba(255, 76, 77, 0.5);
    padding: 0px;
}
::v-deep.el-form {
    .el-form-item {
        .el-form-item__label {
            // text-align: left;
            color: #666;
            font-size: 14px;
            font-weight: 400;
        }
    }
}
.warehousing_dialog {
    ::v-deep.el-form {
        .el-form-item {
            margin-bottom: 10px;
        }
        .el-form-item:last-of-type {
            margin-bottom: 0px;
        }
    }
}
.outLibrary_dialog {
    ::v-deep.el-form {
        .el-form-item {
            margin-bottom: 10px;
        }
        .el-form-item:last-of-type {
            margin-bottom: 0px;
        }
    }
}
.dialog_content {
    background: #f3f4f5;
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    .dialog_content_title {
        color: #333;
        font-size: 20px;
        font-weight: bold;
        line-height: 30px;
        margin-bottom: 10px;
    }
}
</style>
